<template>
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar
    :fixed="false"
    :safeAreaInsetTop="true"
    height="0"
    bgColor="transparent"
    leftIcon=""
  />
  <!-- #endif -->
  <view>
    <view class="p-5">
      <view class="language" @click="languagePickerRef.open()">
        <text>{{ currentLanguage.label }}</text>
      </view>
      <view class="text-center">
        <image
          :src="shopInfo.image"
          style="width: 150rpx; height: 150rpx"
          class="rounded-circle"
        ></image>
      </view>
      <view class="text-center mt-2 h4">{{ shopInfo.name }}</view>
      <view class="text-center text-warning font-md mt-2">
        {{ currentLanguageTexts.tableNumber }}：{{ deskNumber }}</view
      >
      <view class="text-center mt-2 text-color-assist font-size-sm">{{
        currentLanguageTexts.pleaseSelectTheNumberOfDiners
      }}</view>
      <view class="text-center font mt-3 flex flex-wrap justify-center">
        <span
          v-for="(item, index) in 12"
          :key="index"
          class="penple"
          :class="{ checked: index + 1 == peoples }"
          @click="selectPeople(index + 1)"
        >
          <span class="penple-num">{{ index + 1 }}</span>
        </span>
      </view>
      <view class="mt-5"
        ><uv-button
          color="#09b4f1"
          :disabled="disabled"
          :text="currentLanguageTexts.confirm"
          @click="submit"
        ></uv-button
      ></view>
      <uv-toast ref="toast"></uv-toast>
    </view>
    <languagePicker ref="languagePickerRef" placement="center" />
  </view>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import { shopGet } from '@/api/market';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { urlDecode, parseQuery, isWeixin } from '@/utils/util';
import { useMainStore } from '@/store/store';
import cookie from '@/utils/cookie';
import { storeToRefs } from 'pinia';
import languagePicker from '@/pages/components/languagePicker/index.vue';

const main = useMainStore();
const { currentLanguageTexts, currentLanguage } = storeToRefs(main);

const peoples = ref(0);
//const isChecked = ref(0)
const deskNumber = ref('');
const shopInfo = ref({});
const desk = ref({});
const toast = ref();
const disabled = ref(false);

const languagePickerRef = ref();

onLoad((option) => {
  //为了方便演示，这里用本地缓存
  console.log('option:', option);
  console.log('parseQuery:', parseQuery());
  console.log('scene:', parseQuery().scene);

  // if (parseQuery().scene) {
  //   let params = urlDecode(atob(option.scene));
  //   cookie.set('params', params);
  // } else if (option.scene) {
  //   let params = urlDecode(atob(option.scene));
  //   cookie.set('params', params);
  // }

  // let newParams = cookie.get('params');
  // if (newParams) {
  //   deskNumber.value = newParams.number;
  //   desk.value = newParams;
  //   main.SET_DESK(newParams);
  //   main.SET_ORDER_TYPE('desk');
  //   console.log('newParams:', newParams);
  //   getShop(newParams.shopId, newParams.id);
  // }
  // setTimeout(() => {
  //   if (!isManualSetLang.value) {
  //     languagePickerRef.value.open();
  //   }
  // }, 500);
});

onShow(() => {
  const mypage = getCurrentPages();
  console.log('mypage:', mypage[mypage.length - 1].options.scene);
  let params = urlDecode(atob(mypage[mypage.length - 1].options.scene));
  if (params) {
    deskNumber.value = params.number;
    desk.value = params;
    main.SET_DESK(params);
    main.SET_ORDER_TYPE('desk');
    getShop(main.desk.shopId, main.desk.id);
    return;
  }
  console.log('params:', params);
  if (main.isScan) {
    deskNumber.value = main.desk.number;
    desk.value = main.desk;
    getShop(main.desk.shopId, main.desk.id);
    return;
  }
});

const selectPeople = (num) => {
  peoples.value = num;
  desk.value.people = num;
  console.log('desk1:', desk.value);
};

const getShop = async (shopId, deskId) => {
  if (!main.isLogin) {
    uni.navigateTo({ url: '/pages/components/pages/login/login' });
    return;
  }
  //获取门店
  let shop = await shopGet({
    shopId: shopId,
    deskId: deskId,
  });

  shopInfo.value = shop;
  main.SET_STORE(shop);

  if (!shop.isEmpty) {
    if (shop.deskOrderId) {
      console.log('desk:', main.desk);
      //{id: "107", number: "A11", shopId: "2"}
      let myDesk = main.desk;
      myDesk.people = shop.deskPeople;
      myDesk.orderId = shop.deskOrderId;
      main.SET_DESK(myDesk);
      console.log('desk2:', main.desk);
      // uni.navigateTo({
      // 	url: '/pages/components/pages/orders/detail?id=' + shop.deskOrderId
      // })
      //main.SET_DESK({id: order.deskId, number:order.deskNumber, shopId: order.shopId, people: order.deskPeople,orderId: order.orderId})
      uni.switchTab({
        url: '/pages/menu/menu',
      });
      return;
    } else {
      disabled.value = true;
      toast.value.show({
        message: currentLanguageTexts.value.Thefood,
        type: 'error',
        duration: 5000,
      });
      return;
    }
  }
};

const submit = () => {
  if (peoples.value == 0) {
    uni.showToast({
      title: currentLanguageTexts.value.pleaseSelectTheNumberOfDiners,
      duration: 2000,
      icon: 'none',
    });

    return;
  }

  cookie.remove('params');

  uni.switchTab({
    url: '/pages/menu/menu',
  });
};
</script>

<style lang="scss" scoped>
.language {
  position: absolute;
  top: calc(50rpx + var(--status-bar-height));
  right: 40rpx;
  display: flex;
  align-items: center;
  background: rgba($color: #fff, $alpha: 0.5);
  padding: 10rpx 16rpx;
  border-radius: 8rpx;
  gap: 10rpx;
  color: #282828;
  font-size: 24rpx;
}
.checked {
  background-color: #da5650 !important;
  color: #ffffff;
}
.penple {
  padding: 40rpx;
  background-color: #ffffff;
  margin: 10rpx 10rpx;
}
.penple-num {
  padding: 10rpx;
  display: block;
  width: 30rpx;
}
</style>
